<template>
  <div class="content">
    <header>
      <section class="head_goback">
        <svg
          width="100%"
          height="100%"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          @click="$router.go(-1)"
        >
          <polyline
            points="12,18 4,9 12,0"
            style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2"
          />
        </svg>
      </section>
      <section class="title_head ellipsis">
        <span class="title_text">扫描设备</span>
      </section>
    </header>
    <div class="Detail">
      <div id="code">
        <div
          style="
            width: 240px;
            height: 192px;
            background-color: #fff;
            margin: 15% auto 5%;
            text-align: center;
          "
        ></div>
      </div>
      <p>将二维码放入框内，即可自动扫描</p>
      <div class="sweep">开始扫码</div>
      <div class="start">识别失败，手动录入</div>
    </div>
  </div>
</template>


<script>
export default {
  name: "Saoma",
  data() {
    return {
      start: "",
    };
  },
  //   activated() {
  //     const self = this;
  //     if (window.plus) {
  //       self.plusReady();
  //     } else {
  //       document.addEventListener("plusready", self.plusReady, false);
  //     }
  //     document.addEventListener(
  //       "DOMContentLoaded",
  //       function () {
  //         self.domready = true;
  //         self.plusReady();
  //       },
  //       false
  //     );

  //     setTimeout(function () {
  //       self.sweep();
  //     }, 1000);
  //   },

  //   methods: {
  //     plusReady() {
  //       const self = this;
  //       self.scan = new plus.barcode.Barcode("code");
  //       self.scan.onmarked = self.onmarked;
  //       // console.log(self.scan);
  //     },
  //     sweep() {
  //       const self = this;
  //       // this.scan.start();
  //     },
  //     onmarked(type, result) {
  //       let t = this;
  //       var text = "未知: ";

  //       switch (type) {
  //         case plus.barcode.QR:
  //           type = "QR";
  //           break;
  //         case plus.barcode.EAN13:
  //           type = "EAN13";
  //           break;
  //         case plus.barcode.EAN8:
  //           type = "EAN8";
  //           break;
  //         default:
  //           type = "其他" + type;
  //           break;
  //       }
  //       result = result.replace(/\n/g, "");
  //       if (result.indexOf("http://") == 0 || result.indexOf("https://") == 0) {
  //         plus.nativeUI.confirm(
  //           result,
  //           function (i) {
  //             if (i.index == 0) {
  //               plus.runtime.openURL(result);
  //               console.log(result);
  //               t.scan.close();
  //               t.$router.push({ path: "Info", query: { id: result } });
  //             } else {
  //               console.log(result);
  //               t.scan.close();
  //               window.localStorage.scan = result;
  //               t.$router.push({ path: "Info", query: { id: result } });
  //             }
  //           },
  //           "",
  //           ["打开", "取消"]
  //         );
  //       } else {
  //         console.log(result);
  //       }
  //     },
  //   }
};
</script>

<style scoped lang="scss">
.content {
  background-color: #000;
  color: white;
  height: 100vh;
  overflow: hidden;
  header {
    background-color: #000;
    height: 80px;
    width: 100%;
    text-align: center;
    line-height: 80px;
    display: flex;
    top: 0;
    z-index: 99999;
    .head_goback {
      padding-top: 15px;
      width: 10px;
      height: 35px;
      padding-left: 10px;
    }
    .title_head {
      width: 92%;
      text-align: center;
      color: white;
      font-size: 22px;
      letter-spacing: 2px;
    }
  }
  .Detail {
    width: 96%;
    margin: 0 auto;
    .session {
      .name {
        margin: 10px 0;
        font-size: 10px;
        color: #333333;
        font-weight: bold;
      }
      .useTutorials {
        background-color: #3998f7;
        border-radius: 5px;
      }
      .desc {
        margin: 10px 0;
        font-size: 10px;
        color: #333333;
        .title {
          font-weight: bold;
        }
        .intro {
          margin-top: 10px;
        }
      }
    }
    p {
      font-size: 14px;
      text-align: center;
    }
    .sweep {
      text-align: center;
      margin: 0 auto;
      width: 230px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      font-size: 16px;
      position: relative;
      z-index: 9999;
      color: white;
      background: #3b2c86;
      box-shadow: 0px 6px 9px 0px rgba(94, 2, 180, 0.57);
      margin-top: 50px;
    }
  }
  .start {
    text-align: center;
    margin: 0 auto;
    width: 230px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-size: 16px;
    background: white;
    border: 2px solid rgb(163, 164, 255);
    color: rgb(177, 163, 255);
    margin-top: 20px;
  }
}
</style>
